/*.page-1{ background-color:#083846;}
.page-2{ background-color:#9261BF;}
.page-3{ background-color:#F3533C;}
.page-4{ background-color:#FFBF50;}*/
#page-content { }
.page,.startpages{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform-origin: center bottom; 
	 -webkit-transform-origin: center bottom; 
	 -moz-transform-origin: center bottom; 
	 -o-transform-origin: center bottom;background:url(../img/00/00.jpg) left top no-repeat; 
}
.startpages { z-index:999}
 
.share,.sharebg,.laytop{
	display: none;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%; z-index:9999;
}
.laytop { display: none; z-index:9997;background:url(../img/00/00.jpg) left top no-repeat;background-size: cover;}
.laytop .laytopback { display:block; position:absolute; top:20px; right:20px; left:auto; background:url(../img/laytop/back.png) no-repeat; background-size:100%; width:72px; height:17px;}
.laytop .laytopcontent { margin:20% 5% auto 5%}
.sharebg {   
    opacity: 0.5;
    z-index: 9998; }
.share {width:164px; height:128px; background:url(../img/share.png) right top no-repeat; background-size:100%;  right:10px; top:10px; left:auto}
.btn-group{
  position: absolute;
  top:40%;
  text-align: center;
  width:50%;
  margin:0 auto; left:0; right:0
}
.btn-group a{
  display: inline-block;
  margin-left: -20px;
}
.btn-group a img{
  width: 160px;
  height: auto;
}

/* loading */
#loading{
	display:block;
	position:absolute;
	left:0; 
	top:0;
	width: 100%;
	height: 100%;
	color:white;
	background: #5fc4d6;
	font-size: 1em;
	text-align: center;
	overflow:hidden;
	z-index: 9999;
}

.spinner {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  position: relative;
  top:40%;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
/*loading区域结束*/

/*定义通用属性*/
.fc {position:absolute; left:0; right:0; margin-left:auto; margin-right:auto}

/*JS定义页面大小*/
.arealayer { position:relative; width:100%; height:100%; margin:0 auto}
.pagearrow,.pagearrow2 {position:absolute; bottom:0 ; left:0; right:0; margin-left:auto; margin-right:auto;width:30px; height:15px; background:url(../img/arrowtop.png) left top; background-size:100% 100%; bottom:25px; z-index:99}
.pagearrow2 { background:url(../img/arrowtop2.png) left top; background-size:100% 100%;}

.home {position:absolute; left:0; right:0; background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; text-align:center; width:100%; height: auto; z-index:10}
 
 .zhezhi img { height:inherit}
.page-2 { background:url(../img/01/00.jpg) no-repeat; background-size:cover}
.page-2 .z1 { top:25%; left:6%; right:auto}
.page-2 .z2 { top:23%; left:40%; right:auto; z-index:99}
.page-2 .z3 { top:50%; left:6%; right:auto}
.page-2 .z4 {top:55%; left:6%; right:auto}


.page-3 { background:url(../img/02/02.jpg) no-repeat; background-size:cover}
.page-3 .z1 { top:23%; left:6%; right:auto}
.page-3 .z2 { top:30%; left:10%; right:auto; }
.page-3 .z3 { top:20%; left:33%; right:auto}
.page-3 .z4 {top:30%; left:64%; right:auto}
.page-3 .z5 { top:48%; left:11%; right:auto}
.page-3 .z6 { top:55%; left:15%; right:auto; }
.page-3 .z7 { top:48%; left:34%; right:auto}
.page-3 .z8 {top:55%; left:69%; right:auto}
 
 
.page-4 { background:url(../img/03/03.jpg) no-repeat; background-size:cover}
.page-4 .z1 { top:17%; left:6%; right:auto}
.page-4 .z2 { top:23%; left:6%; right:auto;  }
.page-4 .z3 { top:30%; right:12%; left:auto}
.page-4 .z4 {top:48%; right:12%; left:auto}
 
.page-5,.page-6,.page-7,.page-8 { background:url(../img/04/04.jpg) no-repeat; background-size:cover}
.page-5 .z1,.page-6 .z1,.page-7 .z1,.page-8 .z1 {top:7%; left:5%; right:auto; z-index:99 }
.page-5 .z2,.page-6 .z2,.page-7 .z2,.page-8 .z2 {top:22%; right:6%; left:auto }

.page-5 .z3,.page-6 .z3,.page-7 .z3,.page-8 .z3,.page-5 .z4,.page-6 .z4,.page-7 .z4,.page-8 .z4,.page-5 .z5,.page-6 .z5,.page-7 .z5,.page-8 .z5,.page-5 .z6,.page-6 .z6,.page-7 .z6,.page-8 .z6,.page-5 .z7 { opacity:1}

.page-5 .z3 { top:57%; left:50%; right:auto}
.page-5 .z4 {top:57%; left:6%; right:auto} 
.page-5 .z5 { top:67%; left:15%; right:auto}
.page-5 .z6 {top:74%; left:56%; right:auto} 
.page-5 .z7 {top:82%; left:10%; right:auto} 


.page-6 .z3 { top:60%; left:10%; right:auto}
.page-6 .z4 {top:60%; left:46%; right:auto} 
.page-6 .z5 { top:70%; left:10%; right:auto}
.page-6 .z6 {top:70%; left:46%; right:auto} 


.page-7 .z3,.page-8 .z3 { top:60%; left:10%; right:auto}
.page-7 .z4,.page-8 .z4 {top:70%; left:46%; right:auto} 
.page-9 { background:url(../img/08/08.jpg) center top no-repeat; background-size:cover}
.page-9 .z2 { top:60%;left:10%; right:auto}
.page-9 .z3 {top:65%;left:10%; right:auto } 
.page-9 .z4 { top:70%;left:10%; right:auto}

.page-9 .z5 { bottom:2%} 

.homelay { width:140px; top:30px; right:30px; left:auto;}
.homefoot { bottom:40px;}
 
 
.clickpage { background:#33BAED}
.clickpage .cp1 { background:url(../img/zantext.png) left top no-repeat; width:70%; height:150px; background-size: 100%; top:5%}
.clickpage .cp3 {  width:50px; height:50px;  top:70%; z-index:98}
.clickpage .cp3.notclick { background:url(../img/zan-null.png) left top no-repeat; width:50px; height:50px; background-size:100% 100%; top:70%}
.clickpage .cp3.on  { background:url(../img/zan-ok.png) left top no-repeat;  background-size:100% 100%;}
.clickpage .cp4 {  width:165px; height:140px;  top:40%; left:0; right:0; z-index:11; background:url(../img/allheart.png) left top no-repeat; background-size:100%;   opacity:0}

.pageend { background:#3D4763; }
.pageend .sharenum { width:80%; background:#31395D; top:50%; font-size:12px; color:#fff;margin-left:auto; margin-right:auto; padding:12px 20px; border-radius:8px;-webkit-border-radius:8px; font-family:"Heiti SC", "Microsoft YaHei", "Arial Unicode MS"; line-height:1.6em}
.pageend .btns { top:65%; width:70%;}
.pageend .btns .ftp1 { float:left}
.pageend .btns .ftp2 { float:right}

.a-name,.a-build,.a-map,.a-taps,.floatlayerbg,.floatlayer,.paihang{ position:absolute; left:0; right:0; background-position:0 0; background-repeat:no-repeat; background-size:100%;   margin:0 auto; text-align:center; width:100%; height:100%}
.shutdiv,.shareshutdiv { position:absolute; right:20px; top:20px; z-index:1001; width:40px; height:40px; background:url(../img/shut.png) 0 0 no-repeat; background-size:100%;}
.shareshutdiv {background:url(../img/end/share.png) 0 0 no-repeat; background-size:cover; width:20px; height:20px;}
.floatlayerbg,.floatlayer,.shutdiv,.paihang{ display:none}
.floatlayerbg,.floatlayer { z-index:999}
.floatlayerbg { background-size:cover}
.floatlayer { overflow:scroll; height: auto}
.floatlayer img { margin:0; padding:0; display:block}

.floatautodo {position: absolute;display: block;top: 20px;right: 20px;opacity: 0.8;z-index: 9997;}

/*针对小屏 主要是IPHONE4  做处理*/
@media screen and (max-height:420px) {
	 .laytop .laytopcontent { margin-top:5%}
	 .page-4 .z4 { top:52%}
	 .homelay img{ width:130px; height:inherit}
	 
.page-9 .z2 { top:50%;left:2%; right:auto}
.page-9 .z3 {top:57%;left:2%; right:auto } 
.page-9 .z4 { top:64%;left:2%; right:auto}
.page-9 .z5 { bottom:10%; top:auto} 
	 
.clickpage .cp1 {width: 60%;height: 100px;}
.bgcircle.bigfasan {top: 3%;}
.clickpage .cp4 {top: 30%;}
.pageend .bgcircle.bigfasan {top: -20%;}
.pageend .sharenum { top:45%;padding: 8px 10px;width: 90%;}
.pageend .btns {top: 60%;}
}
 
.hidecontent { display:none}